<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="/website/static/"/>

    <script src="../webjars/jquery/3.3.0/jquery.js" type="text/javascript"></script>
    <script>
        //实现图片上传
        function fileupload(){
            if($('#file').val() == ''){  //检查input[type=file]是否有值
                // plus.nativeUI.toast('请选择图片再进行上传操作！');
                console.log('请选择图片再进行上传操作！');
            }else{
                var formdata=new FormData();
                //封装传递到后台的文件数据
                formdata.append('formFile',$("#file").get(0).files[0]);
                console.log(formdata);
                $.ajax({
                    url: '/website/test/test3',
                    data: formdata,//文件数据，这必须有
                    type: "POST",//请求模式，必须是post
                    dataType:"json",//服务端返回的数据格式
                    async: false,//同步，必须是同步
                    cache: false,//禁用缓存
                    contentType:false,//这里不能有，必须这样
                    mimeType:"multipart/form-data",//上传格式必须这样写
                    processData: false,//这里必须是这样
                    success: function(json) {
                        console.log(json);
                        $('#img').attr("src",json.data).show();//这里放的是路径

                    },
                    error: function(data) {
                        console.log(data.status);
                    }
                });
            }
        }

        $(function(){
            $("#btnUpload").on("click",fileupload);
        })
    </script>
</head>
<body>
    <div>
        <h2>新增图书,ajax版本文件上传</h2>
        <form action="/website/test/test2" method="post">
            <p>
                <span>书名：</span>
                <input type="text" name="title"/>
            </p>
            <p>
                <span>图书封面:</span>
                <input type="file" name="file" id="file"/>

                <input type="button" id="btnUpload" value="上传"/>
                <img src="#" id="img" style="display: none;width:100px"/>
            </p>
            <p>
                <input type="submit" value="新增"/>
            </p>
        </form>
    </div>
</body>
</html>